<template>
	<view class="page">

		<!-- 轮播图 start -->
        <swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
        	<swiper-item v-for="(item,index) in carouselList" :key="index" :data-movieid="item.movieId" @click="showMovie">
        		<image class="carousel" :src="item.image"></image>
        	</swiper-item>
        </swiper>
		<!-- 轮播图 end -->

		<!-- 热门电影 start -->
        <view class="cu-bar bg-white solid-bottom">
        	<view class="action">
        		<text class="cuIcon-appreciate text-orange"></text>
                <text class="text-bold">热门电影</text>
        	</view>
        	<view class="action">
                <button class="cu-btn bg-white">更多</button>
        	</view>
        </view>

		<scroll-view scroll-x="true" class="page-block hot">
			<view class="single-poster" v-for="movie in hotMovieList" :data-movieid="movie.id" @click="showMovie">
				<view class="poster-wrapper">
					<image class="poster" :src="movie.poster"></image>
					<view class="movie-name">{{movie.name}}</view>
					<view class="movie-score-wrapper">
						<uni-rate readonly="true" :size="10" :value="movie.score/2"></uni-rate>
						<view class="movie-score">{{movie.score}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 热门电影 end -->

		<!-- 热门预告 start -->
        <view class="cu-bar bg-white solid-bottom">
        	<view class="action">
        		<text class="cuIcon-favor text-green"></text>
                <text class="text-bold">热门预告</text>
        	</view>
        	<view class="action">
                <button class="cu-btn bg-white">更多</button>
        	</view>
        </view>

		<scroll-view scroll-x="true" class="page-block hot">
			<view class="single-poster" v-for="trailer in hotTrailerList" :data-movieid="trailer.id" @click="showMovie">
				<view class="poster-wrapper">
					<image class="poster" :src="trailer.poster"></image>
					<view class="movie-name">{{trailer.name}}</view>
					<view class="movie-score-wrapper">
						<uni-rate readonly="true" :size="10" :value="trailer.score/2"></uni-rate>
						<view class="movie-score">{{trailer.score}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 热门预告 end -->

		<!-- 猜你喜欢 start -->
        <view class="cu-bar bg-white solid-bottom">
        	<view class="action">
        		<text class="cuIcon-like text-red"></text>
                <text class="text-bold">猜你喜欢</text>
        	</view>
        </view>

		<view class="page-block guess-u-like">
			<view class="u-like-single" v-for="(like, likeindex) in likeMovieList">
				<image class="u-like-img" :src="like.poster" :data-movieid="like.id" @click="showMovie"></image>

				<view class="u-like-desc">
					<view class="u-like-title" :data-movieid="like.id" @click="showMovie">
						{{like.name}}
						<uni-rate readonly="true" :size="10" :value="like.score/2"></uni-rate>
					</view>
					<view class="u-like-info">
						{{like.years}} / {{like.region}} / {{like.type}} / {{like.language}}
					</view>
					<view class="u-like-info">
						{{like.actors}}
					</view>
				</view>

				<view class="u-like-oper" :data-likeindex="likeindex" @click="praiseMe">
					<image class="praise-icon" src="../../static/icos/praise.png"></image>
					<view class="praise-me">点赞</view>
					<!-- <view :animation="animationDataArr[likeindex]" :class="'praise-me animation-opacity">+1</view> -->
					<view :class="'praise-me animation-opacity ' + (praiseMeIndex==likeindex?'praise-me-animation':'')">+1</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 end -->

	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import uniIcon from "@/components/uni-icons/uni-icons.vue"

	export default {
		data() {
			return {
				carouselList: [{"id":"1","movieId":"marvel-1011","image":"../../static/carousel/1.png","sort":"1","isShow":"1"},{"id":"2","movieId":"xman-1004","image":"../../static/carousel/2.png","sort":"1","isShow":"1"},{"id":"3","movieId":"dc-1008","image":"../../static/carousel/3.png","sort":"1","isShow":"1"},{"id":"4","movieId":"marvel-1022","image":"../../static/carousel/4.png","sort":"1","isShow":"1"}],
				hotMovieList: [{"id":1,"name":"速度与激情9","poster":"https://www.yugaopian.cn/files/mpic/201610/p18050.jpg","playurls":"","status":"预告","type":"动作 / 犯罪","years":2021,"region":"美国","language":"英语 中文字幕","director":"林诣彬","actors":"范·迪塞尔 / 约翰·塞纳 / 米歇尔·罗德里格兹 / 乔丹娜·布鲁斯特","plot":"故事发生在《速度与激情8》的两年后，唐老大将要对付与昔日的敌人塞弗合作的弟弟雅各。","score":9.5,"comments":520,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":2,"name":"柳青","poster":"https://www.yugaopian.cn/files/mpic/202105/p31795.jpg","playurls":"https://vod.pipi.cn/43903a81vodtransgzp1251246104/9a8b034e5285890818335736026/v.f42905.mp4","status":"预告","type":"剧情 / 传记 / 历史","years":2021,"region":"中国大陆","language":"中文","director":"田波","actors":"成泰燊 / 丹琳 / 师清峰 / 卢学习","plot":"影片真实再现了五十六年代，新中国百废待兴，全国开展了轰轰烈烈的社会主义农村合作化运动。青年作家柳青辞掉北京优渥的干部待遇，他决心亲自参与实践，创作一部反映社会主义人民集体创业的史诗巨著。柳青举家落户在皇甫村的一所破庙里，他深入农村建设一线，扎根人民十四年，历经各种运动，面对农业合作社建设的各种困境，他铁肩担道义，和农民一起开辟了社会主义事业在农村的新局面，在各种困境中创作出《创业史》第一部，一经发表，轰动全国。就在他雄心勃勃展开第二部创作时，一场更大的风暴席卷而来，面对人生的磨难，他不忘初心，最终用一生书写了一段艰苦卓绝的社会主义创业史。","score":8.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":3,"name":"再见汪先森","poster":"https://www.yugaopian.cn/files/mpic/202104/p31596.jpg","playurls":"","status":"预告","type":"喜剧 / 爱情 / 奇幻","years":2021,"region":"中国大陆","language":"中文","director":"王大治","actors":"萧子墨 / 张国强 / 吕晓霖 / 柴碧云","plot":"12岁的腊肠犬“江米条”在帮主人方一一挽留爱情时挺身而出，却意外离世来到汪星世界，在这里要做的第一件事就是忘却前尘，这就意味着他将不再记起和方一一的点点滴滴，也许记忆可以重置，但爱着方一一的本能经年难忘，江米条奋力反抗冲破阻拦，历经艰险重返人间，穿越茫茫人海，用另一种方式陪伴在方一一身边，在生命的最后一刻，倾尽全力护她周全，用两生两世的温柔全心全意地守护他最爱的方一一。","score":7.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":4,"name":"你好世界","poster":"https://www.yugaopian.cn/files/mpic/202104/p31736.jpg","playurls":"","status":"预告","type":"爱情 / 动画 / 奇幻","years":2021,"region":"日本","language":"日语 中文字幕","director":"伊藤智彦","actors":"北村匠海 / 松坂桃李 / 滨边美波 / 子安武人","plot":"为了拯救爱人，16岁的直实卷入了这场现实与虚拟的记忆世界，经历了一系列超乎想象的事情。即使世界毁灭，我也想再见你一面。","score":6.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"}],
				hotTrailerList: [{"id":1,"name":"速度与激情9","poster":"https://www.yugaopian.cn/files/mpic/201610/p18050.jpg","playurls":"","status":"预告","type":"动作 / 犯罪","years":2021,"region":"美国","language":"英语 中文字幕","director":"林诣彬","actors":"范·迪塞尔 / 约翰·塞纳 / 米歇尔·罗德里格兹 / 乔丹娜·布鲁斯特","plot":"故事发生在《速度与激情8》的两年后，唐老大将要对付与昔日的敌人塞弗合作的弟弟雅各。","score":9.5,"comments":520,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":2,"name":"柳青","poster":"https://www.yugaopian.cn/files/mpic/202105/p31795.jpg","playurls":"https://vod.pipi.cn/43903a81vodtransgzp1251246104/9a8b034e5285890818335736026/v.f42905.mp4","status":"预告","type":"剧情 / 传记 / 历史","years":2021,"region":"中国大陆","language":"中文","director":"田波","actors":"成泰燊 / 丹琳 / 师清峰 / 卢学习","plot":"影片真实再现了五十六年代，新中国百废待兴，全国开展了轰轰烈烈的社会主义农村合作化运动。青年作家柳青辞掉北京优渥的干部待遇，他决心亲自参与实践，创作一部反映社会主义人民集体创业的史诗巨著。柳青举家落户在皇甫村的一所破庙里，他深入农村建设一线，扎根人民十四年，历经各种运动，面对农业合作社建设的各种困境，他铁肩担道义，和农民一起开辟了社会主义事业在农村的新局面，在各种困境中创作出《创业史》第一部，一经发表，轰动全国。就在他雄心勃勃展开第二部创作时，一场更大的风暴席卷而来，面对人生的磨难，他不忘初心，最终用一生书写了一段艰苦卓绝的社会主义创业史。","score":8.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":3,"name":"再见汪先森","poster":"https://www.yugaopian.cn/files/mpic/202104/p31596.jpg","playurls":"","status":"预告","type":"喜剧 / 爱情 / 奇幻","years":2021,"region":"中国大陆","language":"中文","director":"王大治","actors":"萧子墨 / 张国强 / 吕晓霖 / 柴碧云","plot":"12岁的腊肠犬“江米条”在帮主人方一一挽留爱情时挺身而出，却意外离世来到汪星世界，在这里要做的第一件事就是忘却前尘，这就意味着他将不再记起和方一一的点点滴滴，也许记忆可以重置，但爱着方一一的本能经年难忘，江米条奋力反抗冲破阻拦，历经艰险重返人间，穿越茫茫人海，用另一种方式陪伴在方一一身边，在生命的最后一刻，倾尽全力护她周全，用两生两世的温柔全心全意地守护他最爱的方一一。","score":7.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":4,"name":"你好世界","poster":"https://www.yugaopian.cn/files/mpic/202104/p31736.jpg","playurls":"","status":"预告","type":"爱情 / 动画 / 奇幻","years":2021,"region":"日本","language":"日语 中文字幕","director":"伊藤智彦","actors":"北村匠海 / 松坂桃李 / 滨边美波 / 子安武人","plot":"为了拯救爱人，16岁的直实卷入了这场现实与虚拟的记忆世界，经历了一系列超乎想象的事情。即使世界毁灭，我也想再见你一面。","score":6.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"}],
				likeMovieList: [{"id":1,"name":"速度与激情9","poster":"https://www.yugaopian.cn/files/mpic/201610/p18050.jpg","playurls":"","status":"预告","type":"动作 / 犯罪","years":2021,"region":"美国","language":"英语 中文字幕","director":"林诣彬","actors":"范·迪塞尔 / 约翰·塞纳 / 米歇尔·罗德里格兹 / 乔丹娜·布鲁斯特","plot":"故事发生在《速度与激情8》的两年后，唐老大将要对付与昔日的敌人塞弗合作的弟弟雅各。","score":9.5,"comments":520,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":2,"name":"柳青","poster":"https://www.yugaopian.cn/files/mpic/202105/p31795.jpg","playurls":"https://vod.pipi.cn/43903a81vodtransgzp1251246104/9a8b034e5285890818335736026/v.f42905.mp4","status":"预告","type":"剧情 / 传记 / 历史","years":2021,"region":"中国大陆","language":"中文","director":"田波","actors":"成泰燊 / 丹琳 / 师清峰 / 卢学习","plot":"影片真实再现了五十六年代，新中国百废待兴，全国开展了轰轰烈烈的社会主义农村合作化运动。青年作家柳青辞掉北京优渥的干部待遇，他决心亲自参与实践，创作一部反映社会主义人民集体创业的史诗巨著。柳青举家落户在皇甫村的一所破庙里，他深入农村建设一线，扎根人民十四年，历经各种运动，面对农业合作社建设的各种困境，他铁肩担道义，和农民一起开辟了社会主义事业在农村的新局面，在各种困境中创作出《创业史》第一部，一经发表，轰动全国。就在他雄心勃勃展开第二部创作时，一场更大的风暴席卷而来，面对人生的磨难，他不忘初心，最终用一生书写了一段艰苦卓绝的社会主义创业史。","score":8.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":3,"name":"再见汪先森","poster":"https://www.yugaopian.cn/files/mpic/202104/p31596.jpg","playurls":"","status":"预告","type":"喜剧 / 爱情 / 奇幻","years":2021,"region":"中国大陆","language":"中文","director":"王大治","actors":"萧子墨 / 张国强 / 吕晓霖 / 柴碧云","plot":"12岁的腊肠犬“江米条”在帮主人方一一挽留爱情时挺身而出，却意外离世来到汪星世界，在这里要做的第一件事就是忘却前尘，这就意味着他将不再记起和方一一的点点滴滴，也许记忆可以重置，但爱着方一一的本能经年难忘，江米条奋力反抗冲破阻拦，历经艰险重返人间，穿越茫茫人海，用另一种方式陪伴在方一一身边，在生命的最后一刻，倾尽全力护她周全，用两生两世的温柔全心全意地守护他最爱的方一一。","score":7.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":4,"name":"你好世界","poster":"https://www.yugaopian.cn/files/mpic/202104/p31736.jpg","playurls":"","status":"预告","type":"爱情 / 动画 / 奇幻","years":2021,"region":"日本","language":"日语 中文字幕","director":"伊藤智彦","actors":"北村匠海 / 松坂桃李 / 滨边美波 / 子安武人","plot":"为了拯救爱人，16岁的直实卷入了这场现实与虚拟的记忆世界，经历了一系列超乎想象的事情。即使世界毁灭，我也想再见你一面。","score":6.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"}],
				praiseMeIndex: -1
			}
		},
		onLoad() {
			var me = this;
			var serverUrl = me.serverUrl;

			// 请求轮播图数据
			// uni.request({
			// 	url: serverUrl + '/index/carousel/list',
			// 	method: 'GET',
			// 	success: (res) => {
			// 		if (res.data.status == 200) {
			// 			me.carouselList = res.data.data;
			// 		}
			// 	}
			// });

			// 请求热门电影数据
			// uni.request({
			// 	url: serverUrl + '/index/movie/hot?type=1',
			// 	method: 'GET',
			// 	success: (res) => {
			// 		if (res.data.status == 200) {
			// 			me.hotMovieList = res.data.data;
			// 		}
			// 	}
			// });

			// 请求热门预告数据
			// uni.request({
			// 	url: serverUrl + '/index/movie/hot?type=2',
			// 	method: 'GET',
			// 	success: (res) => {
			// 		if (res.data.status == 200) {
			// 			me.hotTrailerList = res.data.data;
			// 		}
			// 	}
			// });

			me.refresh();
		},
		onUnload() {
			// 页面卸载时执行
		},
		onPullDownRefresh() {
            // 下拉刷新时执行
			this.refresh();
		},
		methods: {
            // 显示电影详情
			showMovie(e) {
				var movieId = e.currentTarget.dataset.movieid;
				uni.navigateTo({
					url: '../movie/movie?movieId=' + movieId
				})
			},
            // 下拉刷新
			refresh() {
				var me = this;
				var serverUrl = me.serverUrl;

				uni.showLoading({mask: true});

				// 请求猜你喜欢数据
				uni.request({
					url: serverUrl + '/index/movie/hot?type=3',
					method: 'GET',
					success: (res) => {
						if (res.data.status == 200) {
							me.likeMovieList = res.data.data;
						}
					},
					complete: () => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},
			// 点赞动画
			praiseMe(e) {
				var likeindex = e.currentTarget.dataset.likeindex;
				// 添加点赞动画样式
				this.praiseMeIndex = likeindex;
				setTimeout(function() {
					// 移除点赞动画样式
					this.praiseMeIndex = -1;
				}.bind(this), 500);
			}
		},
		components: {
			uniRate,
			uniIcon
		}
	}
</script>

<style>
	@import url("index.css");
</style>
